<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Web</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- favicon.ico -->
<link rel="icon" href="/dist/img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/dist/img/favicon.ico"
	type="image/x-icon" />
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="/dist/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="/dist/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="/dist/css/app.css">
<link rel="stylesheet" href="/plugins/my-jquery-ui/style.css">
<link rel="stylesheet"
	href="/plugins/jsonFormatter/jsonFormatter.min.css">
<link href="/plugins/iCheck/square/blue.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">

		<header class="main-header">
			<!-- Logo -->
			<a href="dash.html" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels -->
				<span class="logo-mini"><i class="fa fa-home text-large"></i>
					<!--  --></span> <!-- logo for regular state and mobile devices --> <span
				class="logo-lg"><b> My Web</b></span>
			</a>
			<!-- Header Navbar: style can be found in header.less -->
			<nav class="navbar navbar-static-top">
				<!-- Sidebar toggle button-->
				<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
					role="button"> <span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
				</a>
				<div class="navbar-custom-menu">
					<ul class="nav navbar-nav">
						<!-- <li><a href="https://adminlte.io/themes/AdminLTE/index2.html"
							data-toggle="control-sidebar"><i class="fa fa-external-link">
						</i> AdminLTE</a></li> -->
					</ul>
				</div>
			</nav>
		</header>
		<!-- Left side column. contains the logo and sidebar -->
		<aside class="main-sidebar">
			<!-- sidebar: style can be found in sidebar.less -->
			<section class="sidebar">
				<!-- /.search form -->
				<!-- sidebar menu: : style can be found in sidebar.less -->
				<ul class="sidebar-menu">
					<li class="treeview active"><a href="/page/formatter.html">
							<i class="fa fa-exchange"></i> <span>JSON格式化</span> <!-- <i class="fa fa-angle-left pull-right"></i> -->
					</a></li>
					<li class="treeview"><a href="/page/watcher.html"> <i
							class="fa fa-eye"></i> <span>实时监控</span> <!-- <i class="fa fa-angle-left pull-right"></i> -->
					</a></li>
					<li class="treeview "><a href="#"> <i class="fa fa-th"></i>
							<span>Demo</span> <i class="fa fa-angle-left pull-right"></i></a>
						<ul class="treeview-menu">
							<li class="treeview"><a href="#"> <i
									class="fa fa-check-square"></i> <span>iCheck Demo</span> <!-- <i class="fa fa-angle-left pull-right"></i> -->
							</a></li>
							<li class="treeview"><a href="#"> <i
									class="fa fa-cubes"></i> <span>WebSocket Demo</span> <!-- <i class="fa fa-angle-left pull-right"></i> -->
							</a></li>
							<li class="treeview"><a href="/page/demo-table.html"> <i
									class="fa fa-table"></i> <span>Table Demo</span> <!-- <i class="fa fa-angle-left pull-right"></i> -->
							</a></li>
						</ul></li>
				</ul>
			</section>
			<!-- /.sidebar -->
		</aside>

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<section class="content">
				<div class="row box-container">
					<div class="col-lg-12 col-xs-12">
						<div class="box box-info ">
							<div class="box-header with-border">
								<h3 class="box-title ">JSON-Formatter</h3>
							</div>
							<div class="box-body">
								<div class="panel">
									<span>待格式化JSON：</span> <span> <textarea
											name="format_src" rows="5" cols="" class="form-control"></textarea>
									</span>
								</div>

								<div class="panel inline-box">
									<ul class="command">
										<li><button type="button" class="btn btn-primary"
												name="btnFormat">格式化</button></li>
										<li><label> <input type="checkbox" data-config="quoteKeys" checked>
												显示引号
										</label></li>
										<li><label> <input type="checkbox" data-config="collapsible">
												显示折叠
										</label></li>
										<li><label> <input type="checkbox" data-config="singleLine">
												单行模式
										</label></li>
										<!-- <li><button type="button" class="btn btn-primary"><i class="fa fa-copy"></i> 复制结果</button></li> -->
									</ul>
								</div>
								<div class="panel">
									<span>格式化JSON：</span> <span><div class="panel" name="format_rst"></div></span>
									<a href="#" class="btn-link" name="copy"><i class="fa fa-copy"></i> 复制</a>
									<span name="copy-message" class="text-red"></span>
								</div>

							</div>
						</div>
					</div>

					<div class="col-lg-12 col-xs-12">
						<div class="box box-info ">
							<div class="box-header with-border">
								<h3 class="box-title">
									<i class="fa fa-file-text-o"> 备注</i>
								</h3>
							</div>
							<div class="box-body">
								<div class="panel">
									<ul>
										<li><span>JSON格式化工具： <a
												href="https://github.com/MHeironimus/jsonFormatter">
													https://github.com/MHeironimus/jsonFormatter </a>
										</span></li>
										<li><span>Jquery 复制插件：<a
												href="https://github.com/patricklodder/jquery-zclip">
													https://github.com/patricklodder/jquery-zclip</a></span></li>
										<li><span>自定义Resize容器</span></li>
									</ul>
								</div>
								<div class="panel"></div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
	<!-- more_pub -->
	<!-- jQuery 2.2.0 -->
	<script src="/plugins/jQuery/jQuery-2.2.0.min.js"></script>
	<script src="/plugins/jQueryUI/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/dist/js/gallery/sea/sea.js"></script>
	<!-- Bootstrap 3.3.6 -->
	<script src="/bootstrap/js/bootstrap.min.js"></script>
	<!-- AdminLTE App -->
	<script src="/dist/js/app.min.js"></script>
	<script src="/plugins/highlight/highlight.js"></script>
	<!-- page script -->
	<script src="/plugins/my-jquery-ui/textarea_resize.js"></script>
	<script src="/plugins/jsonFormatter/jsonFormatter.js"></script>
	<script src="/plugins/iCheck/icheck.min.js"></script>
	<script src="/plugins/jquery-zclip/jquery.zclip.js"></script>
	<!-- seajs script -->
	<script type="text/javascript" src="/dist/js/gallery/sea/sea.js"></script>
	<script type="text/javascript" src="/dist/js/root_config.js"></script>
	<script type="text/javascript">
		seajs.use("appjs/formatter.js");
	</script>
	<!-- page script -->
</body>
</html>
